<script setup lang="ts">
import logo from "/src/assets/practice.png";
import LayoutTopMenu from "./LayoutTopMenu.vue";
import FullScreen from "./FullScreen.vue";
import useUIStore from "@/store/modules/ui";
import RefreshMenu from "./RefreshMenu.vue";
import SelectColor from "./SelectColor.vue";
import { Icon } from "@iconify/vue";

const ui = useUIStore();
</script>

<template>
  <div class="header">
    <div class="title">
      <el-image
        class="logo"
        style="padding: 5px; width: 50px; height: 50px"
        :src="logo"
      ></el-image>
      <span>VUE练习本</span>
    </div>
    <div class="desc">
      <layout-top-menu v-show="ui.layoutMode === 'horizontal'">
      </layout-top-menu>
      <!-- <el-text class="mx-1" type="primary">
        千里之行始于足下，每天的一点点进步都会累积成巨大的飞跃。
      </el-text> -->
    </div>
    <div><SelectColor></SelectColor></div>
    <div><RefreshMenu></RefreshMenu></div>
    <div @click="ui.toggle()" class="commandIcon">
      <Icon
        width="24px"
        :icon="
          ui.layoutMode === 'horizontal'
            ? 'icon-park-outline:left-bar'
            : 'icon-park-outline:top-bar'
        "
      />
    </div>
    <div><full-screen></full-screen></div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  text-align: left;
  border-bottom: 1px solid;
  border-color: var(--practice-backgroud-color);
  display: flex;

  .title {
    position: relative;
    top: 0;
    font-size: 2rem;
    display: flex;
    justify-content: left;
    align-items: center;
    font-weight: 600;
    color: var(--c-text);
  }

  .desc {
    flex: 1;
    display: flex;
    // flex-direction: row-reverse;
  }
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.commandIcon {
  width: 40px;
  height: 60px;
  // margin-right: 10px;
  /* background-color: #f0f0f0; */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  icon {
    font-weight: 600;
    width: 52px;
    height: 52px;
  }
}
.commandIcon:hover {
  background-color: var(--el-color-primary-light-9);
}
</style>
